<!--广告管理页-->
<template>
<!--  新增banner模块-->
  <div style="margin-top: 20px; " >
    <!--添加banner按钮-->
    <el-button @click="dialogVisible=true" style="margin-left: -90%;background-color: orange;color: white;width: 120px;height: 30px">
      添加+
    </el-button>
    <el-dialog title="添加Banner" v-model="dialogVisible" width="70%">
      <el-row :gutter="10">
       <el-col :span="12">
         <div>
           <el-form label-width="100px">
             <el-form-item label="banner名称:">
               <el-input v-model="banner.title" placeholder="Banner名称"></el-input>
             </el-form-item>
             <el-form-item label="所属页面:">
               <el-input v-model="banner.source" placeholder="所属页面" ></el-input>
             </el-form-item>
             <el-form-item label="跳转地址:">
               <el-input v-model="banner.url" placeholder="跳转地址" ></el-input>
             </el-form-item>
             <el-form-item label="创建时间:">
               <el-input v-model="banner.createTime" placeholder="跳转地址" ></el-input>
             </el-form-item>
             <el-form-item label="状态:">
               <el-switch v-model="banner.isStart" :active-value="1" :inactive-value="0" @change="changeStart()"></el-switch>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" style="width:50px;" @click="add()">添加</el-button>
             </el-form-item>
           </el-form>
         </div>
       </el-col>
        <el-col :span="12">
          <div>
            <!--        图片上传开始-->
            <el-upload
                v-model:file-list="fileList"
                action="https://jsonplaceholder.typicode.com/posts/"
                name="file"
                limit="1"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
              <el-icon><Plus /></el-icon>
            </el-upload>
            <hr>
            <el-dialog v-model="dialogVisible1">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
            <el-form-item>
              <el-button type="primary" @click="post()" style="margin-left: 290px">上传</el-button>
            </el-form-item>
          <!--        图片上传结束-->
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>

<!--广告管理列表显示-->
  <el-table :data="arr">
    <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
    <el-table-column prop="title" label="Banner名称" width="110" align="center"></el-table-column>
    <el-table-column prop="source" label="所属页面" width="100" align="center"></el-table-column>
    <el-table-column label="启用状态" width="100">
      <template #default="scope">
        <el-switch v-model="scope.row.isStart" :active-value="1" :inactive-value="0" @change="changeStart()"></el-switch>
      </template>
    </el-table-column>
    <el-table-column prop="url" label="跳转地址" />
    <el-table-column label="封面"  width="100" align="center">
      <template #default="scope">
        <img :src="scope.row.imgUrl" style="width: 100%">
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" width="100" align="center"></el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button type="success" @click="edit(scope.row)">编辑</el-button>
        <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <hr>
  <div class="pagination-container">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script setup>
//1.准备JS数组
import {ref} from "vue";
import {ElMessage} from "element-plus";


const dialogVisible=ref(false);

const arr = ref([
  {title:'banner1',source:'index',isStart:0,url:'https://www.baidu.com',createTime:'2024.01.01'},
  {title:'banner1',source:'index',isStart:0,url:'https://www.baidu.com',createTime:'2024.01.01'},
  {title:'banner1',source:'index',isStart:0,url:'https://www.baidu.com',createTime:'2024.01.01'},
  {title:'banner1',source:'index',isStart:0,url:'https://www.baidu.com',createTime:'2024.01.01'},
  {title:'banner1',source:'index',isStart:0,url:'https://www.baidu.com',createTime:'2024.01.01'},
  {title:'banner1',source:'index',isStart:0,url:'https://www.baidu.com',createTime:'2024.01.01'},
]);

const changeStart=()=>{
  ElMessage.success('修改成功');
}

const del=(id,r)=>{
  if (confirm('您确认要删除contentId为：'+r.id+'的数据数据吗?')){
    ElMessage.success('删除成功');

  }
}


const edit=()=>{
  ElMessage.success('编辑成功');
}

const banner = ref({});

const fileList = ref([]);

const dialogImageUrl = ref('');

const dialogVisible1=ref(false);

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url;
  dialogVisible.value = false
}

//新增banner删除功能
const handleRemove = () => {
  ElMessage.success('已成功删除封面！');
}

//新增banner上传功能
const post = () =>{
  ElMessage.success('上传成功');
}

const currentPage = ref(1);
// 每页显示条目个数
const pageSize = ref(10);
// 总数据条数
const total = ref(20);

const handleSizeChange = (val) => {
  this.pageSize= val;
};

// 当前页改变时触发
const handleCurrentChange = (val) => {
  this.currentPage= val;
};
</script>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 50px; /* 根据需要设置高度 */
}
</style>